<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org”>
    <head>

        <title>角色管理</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/css/bootstrap-all.css">
        <script src="/js/bootstrap-all.js"></script>
        <!-- 系统CSS或JS -->
        <link rel="stylesheet" href="/css/system.css">
        <script type="application/javascript">
            /**
             *新增角色
             */
            function addRole(){
                window.location.href="/role/redirect?page=roleadd";

            }


            /**
             * 查询角色
             */
            function queryRole(){
                $("#alerWait").removeClass("mytips-none");
                $("#form-role").submit();
            }




            /**
             * 更新角色
             */
            function updateRole(id) {
                window.location.href="/role/redirect?page=roleupdate&id="+id;
            }

            function deleteRole(id){
               if (confirm("确定要删除角色"+id+"?")) {

                $.ajax({
                    url:"/role/delete",
                   // dataType:"json",   //返回格式
                    async:true,//请求是否异步，默认为异步
                    data:{"rolecode":id},    //参数值
                    type:"POST",   //请求方式
                    beforeSend:function(){

                    },
                    success:function(mes){
                        if (mes!=''&&mes!=null){
                            alert('mes==='+mes);
                            if (mes>0) {

                                $("#message-success").html("角色删除成功!");
                                $("#alertSuccess").removeClass("mytips-none");

                            }else{
                                $("#message-fail").html("角色删除出错！");
                                $("#alertFail").removeClass("mytips-none");
                            }
                        }
                    },
                    complete:function(){

                    },
                    error:function(){
                        //请求出错处理
                    }
                });
                }
            }
            function  assignMenu(id){
                location.href="/role/redirect?page=roleright"+id;
            }


        </script>
    </head>
    <style>

    </style>
    <body>

        <div id="container">
            <div class='row'>
                <div class='col-3'>
                    <h4>角色管理</h4>
                </div>
            </div>
            <div class='bh2'></div>

            <div class='bg-content'>
                <form id="form-role" action="/role/query?cur=1" method="get">
                    <div class='row'>
                        <div class="col-sm-2">角色编码： <input name='menugrpcode' type='text'/></div>
                        <div class="col-sm-2">角色名称： <input name='menugrpname' type='text'/></div>
                    </div>
                    <button  class="bg-primary mybtn" onclick="queryRole()" id="queryrole" type="button" >查询</button>&nbsp;&nbsp;

                    <button  class="mybtn bg-primary" onclick="addRole()" type="button"  id="addrole" >新增角色</button>

                </form>

            </div>

            <div class='bh5'></div>
            <div class='bg-content'>
                <div>角色表结果：</div>
                <div class='bh2'></div>
                <div>
                    <table
                            class="table table-striped table-bordered table-hover  table-sm">
                        <thead>
                            <tr>
                                <th>角色编码</th>
                                <th>角色名称</th>
                                <th>角色描述</th>
                                <th>菜单管理</th>
                                <th>更新操作</th>
                                <th>删除操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="role:${roleList}">
                                <td  th:text='${role.menugrpcode}'>-</td>
                                <td  th:text='${role.menugrpname}'>-</td>
                                <td  th:text='${role.menugrpdescription}'>-</td>
                                <td><button class="bg-success table-btn" th:value='${role.menugrpcode}' onclick="assignMenu(this.value)">分配菜单</button></td>
                                <td><button class="bg-danger table-btn" th:value='${role.menugrpcode}' onclick="alert(this.value)">修改</button></td>
                                <td><button class="bg-danger table-btn" th:value='${role.menugrpcode}' onclick="deleteRole(this.value)">删除</button></td>

                            </tr>
                        </tbody>
                    </table>

                </div>
                <!-- 分页模板（修改URL及参数） -->
                <div class='row'>
                    <ul class="pagination pagination-sm offset-sm-4"  >
                        <li class="page-item" th:if='${cur!=1&&cur!=0}'><a  class="page-link" th:href="'/role/query?cur=1&menugrpcode=' +${menugrpcode}+'&menugrpname=' +${menugrpname}">首 页</a></li>
                        <li class="page-item" th:if='${cur!=1&&cur!=0}'><a class="page-link" th:href="'/role/query?cur='+${cur-1}+'&menugrpcode=' +${menugrpcode}+'&menugrpname=' +${menugrpname}">上一页</a></li>
                        <li class="page-item" th:if='${cur!=0&&pageCount>1}' th:each="i:${pageCount>5 ? #numbers.sequence(cur>3?cur<(pageCount-2)?cur-2:(pageCount-4):1,cur>3? cur<(pageCount-2)?cur+2:(pageCount):5) : #numbers.sequence(1,pageCount)}"><a class="page-link" th:href="'/role/query?cur='+${i}+'&menugrpcode=' +${menugrpcode}+'&menugrpname=' +${menugrpname}" th:text='${i}'></a></li>
                        <li class="page-item" th:if='${cur!=(pageCount)}'><a class="page-link" th:href="'/role/query?cur='+${cur+1}+'&menugrpcode=' +${menugrpcode}+'&menugrpname=' +${menugrpname}">下一页</a></li>
                        <li class="page-item" th:if='${cur!=(pageCount)}'><a class="page-link" th:href="'/role/query?cur='+${pageCount}+'&menugrpcode=' +${menugrpcode}+'&menugrpname=' +${menugrpname}">尾 页</a></li>
                    </ul>
                </div>


                <!-- 模态框 -->
                <div class="modal fade myalert" id="addmenuModel">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <span class="modal-title">系统提示：</span>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <!-- 模态框主体 -->
                            <div class="modal-body modal-body1">
                                <div class='bg-content'>

                                    <form action="/addmenu">
                                        <div class="row">
                                            <div class="col-sm-4">
                                                菜单编码：<input type="text" name='nodecode'
                                                            style='width: 150px; height: 25px;'  /><br>
                                            </div>
                                            <div class="col-sm-4">
                                                父级编码：<input type="text" name='parentnodecode'
                                                            style='width: 150px; height: 25px;'  /><br>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                菜单名称：<input type="text" name='nodename'
                                                            style='width: 150px; height: 25px;'  /><br>
                                            </div>
                                            <div class="col-sm-4">
                                                菜单描述：<input type="text" name='nodediscription'
                                                            style='width: 150px; height: 25px;'  /><br>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                菜单URL：<input type="text" name='runscript'
                                                             style='width: 150px; height: 25px;'  /><br>
                                            </div>

                                            <div class="col-sm-4">
                                                菜单顺序：<input type="text" name='nodeorder'
                                                            style='width: 150px; height: 25px;'  /><br>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-4">
                                                菜单标志：<select name='nodesign' style='width: 150px; height: 25px;'><br>
                                                <option value="">请选择</option>
                                                <option value="0">0-无效</option>
                                                <option value="1">1-有效</option>
                                            </select>
                                            </div>


                                        </div>

                                        <div class='row' style='padding: 15px;'>
                                            <button class="bg-primary mybtn " type="submit"  id="confirmAddmenu">确认新增</button>
                                            <button class="mybtn bg-primary float-right" type="button" style='margin-left: 45px;'>取消</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- 模态框底部 -->
                        </div>
                    </div>


                </div>

            </div>
            <!--隐藏，接收后台结果-->
            <input id="mes" th:value="${code}" hidden></input>

            <!--通用提示框-成功-->
            <div class='row  mytips mytips-none' id="alertSuccess"   >
                <div class="alert alert-success alert-dismissible fade show">
                    <button type="button" class="close" onclick="window.location.href='../html/role/role.html'" data-dismiss="alert">&times;</button>
                    <strong><span id="message-success" th:text="${message}"></span></strong>
                </div>
            </div>

            <!--通用提示框-失败-->
            <div class='row  mytips mytips-none' id="alertFail"   >
                <div class="alert alert-danger alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong><span id="message-fail" th:text="${message}"></span></strong>
                </div>
            </div>

            <!--通用提示框-等待-->
            <div class='row  mytips mytips-none' id="alerWait"   >
                <div class="alert alert-info alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>请稍候</span></strong>
                </div>
            </div>
        </div>
    </body>
    <script >

        /*************动态显示提示框**************************************/
        var mes=$("#mes").val();
        if (mes!=''&&mes!=null){
            if (mes>0) {

                $("#alertSuccess").removeClass("mytips-none");
            }else{

                $("#alertFail").removeClass("mytips-none");
            }
        }
        /******************************************************************/

    </script>
</html>